<template>
  <div class='photosArea'>
    <ul class="photoItems">
      <li v-for="a,index in liarr" class="photoItem">
        <div class="photo">{{ a }}</div>
        <div @click="deleteItem(index)" class="delete">×</div>
        <div class="clear"></div>
      </li>
    </ul>
    <div @click="deleteAll()" class="deleteAll font30">全部删除</div>
    <div class='coverDel1' v-if="isShowCover&&isFirstDelete">
      <div class="cue font42">
        <p>删除照片后，魔镜将不会保留您任何信息</p>
        <div class="okBtn" @click="closeCover()">
          好的
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {},
    data(){
      return {
        liarr:[1,2,3,4],
        isShowCover: false,
        isFirstDelete: true,
        isdeleteAll:false
      }
    },
    beforeCreate(){
    },
    created(){

    },
    beforeMount(){
    },
    mounted(){

    },
    beforeDestroy(){
    },
    destroyed(){
    },
    methods: {
      deleteAll: function () {
        this.isShowCover=true;
        this.isdeleteAll=true;
        if(!this.isFirstDelete){
            this.liarr=[];
        }
      },
      deleteItem: function (index) {
        this.isShowCover=true;
        if(!this.isFirstDelete) {
          this.liarr.splice(index, 1);
        }
        this.index = index
      },
      closeCover: function () {
        this.isFirstDelete = false;
        this.isShowCover = false;
        if(!this.isFirstDelete) {
          this.liarr.splice(this.index, 1);
        }
        if(this.isdeleteAll){
            this.liarr=[];
        }
      }
    },
    components: {}
  }
</script>
<style scoped>
  .photosArea {
    position: absolute;
    top: 0.36rem;
    width: 2.62rem;
    max-height: 10rem;

  }

  .photoItems {
    overflow: scroll;
    max-height: 8rem;
    margin-bottom: 0.5rem;
  }

  .photoItem {
    margin-bottom: 0.4rem;
  }

  .photo {
    width: 1.6rem;
    height: 1.9rem;
    background-color: red;
    float: left;
  }

  .deleteAll {
    border: 0.03rem solid #ffffff;
    width: 1.54rem;;
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
  }

  .delete {
    width: 0.54rem;
    height: 0.54rem;
    font-size: 0.42rem;
    float: left;
    margin: 0.68rem 0.14rem;
    cursor: pointer;
  }

  .coverDel1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 32rem;
    height: 18rem;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
  }

  .cue {
    width: 10rem;
    height: 6.4rem;
    margin: 5.8rem 11rem;
    background-color: white;
    position: relative;
  }

  .cue p {
    position: absolute;
    top: 2.44rem;
    left: 1.08rem;
    color: black;
  }

  .cue .okBtn {
    background: #000000;
    width: 4rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    position: absolute;
    left: 3rem;
    top: 3.9rem;
  }
</style>
